<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: hotpink;
			display: grid;
			grid-template-rows:repeat(3,1fr);
			grid-template-columns:repeat(3,1fr);
			margin: 5px;
			border-radius: 20px;
			padding: 5px;
			box-shadow: inset 0 3px 3px 0 pink;
		}
		.one,.three2,.five3,.nine7{
			background-color: pink;
			grid-column: 2/3;
			grid-row: 2/3;
			border-radius: 50%;
			margin: 2px;
		}
		.two1,.three1,.four1,.five1,.six1,.nine1{
			background-color: pink;
			grid-column: 1/1;
			grid-row: 1/1;
			border-radius: 50%;
			margin: 2px;
		}
		.two2,.three3,.four4,.five2,.six2,.nine2{
			background-color: pink;
			grid-column: 3/3;
			grid-row: 3/3;
			border-radius: 50%;
			margin: 2px;
		}
		.four2,.five4,.six5,.nine3{
			background-color: pink;
			grid-column: 3/3;
			grid-row: 1/1;
			border-radius: 50%;
			margin: 2px;
		}
		.four3,.five5,.six6,.nine4{
			background-color: pink;
			grid-column: 1/1;
			grid-row: 3/3;
			border-radius: 50%;
			margin: 2px;
		}
		.six3,.nine5{
			background-color: pink;
			grid-column: 1/1;
			grid-row: 2/2;
			border-radius: 50%;
			margin: 2px;
		}
		.six4,.nine6{
			background-color: pink;
			grid-column: 3/3;
			grid-row: 2/2;
			border-radius: 50%;
			margin: 2px;
		}
		.nine8{
			background-color: pink;
			grid-column: 2/2;
			grid-row: 1/1;
			border-radius: 50%;
			margin: 2px;
		}
		.nine9{
			background-color: pink;
			grid-column: 2/2;
			grid-row: 3/3;
			border-radius: 50%;
			margin: 2px;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one"></div>
		</div>
		<div class="box">
			<div class="two1"></div>
			<div class="two2"></div>
		</div>
		<div class="box">
			<div class="three1"></div>
			<div class="three2"></div>
			<div class="three3"></div>
		</div>
		<div class="box">
			<div class="four1"></div>
			<div class="four2"></div>
			<div class="four3"></div>
			<div class="four4"></div>
		</div>
		<div class="box">
			<div class="five1"></div>
			<div class="five2"></div>
			<div class="five3"></div>
			<div class="five4"></div>
			<div class="five5"></div>
		</div>
		<div class="box">
			<div class="six1"></div>
			<div class="six2"></div>
			<div class="six3"></div>
			<div class="six4"></div>
			<div class="six5"></div>
			<div class="six6"></div>
		</div>
		<div class="box">
			<div class="nine1"></div>
			<div class="nine2"></div>
			<div class="nine3"></div>
			<div class="nine4"></div>
			<div class="nine5"></div>
			<div class="nine6"></div>
			<div class="nine7"></div>
			<div class="nine8"></div>
			<div class="nine9"></div>
		</div>
	</body>
</html>
